<template>
	<view class="content">
		<view class="infoContent"> 
			<image :src="coverUrl" class="img"></image>
		  <view class="info">
				<view class="shoppingTitle">{{title}}</view>
				<!-- <view class="sprc">规格:<span>玉见铃兰花手链（0.85g）</span></view> -->
				<view class="num">数量：<span>{{quantity}}</span></view>
				<view class="price">{{money}}</view>
			</view>
		</view>
		<view class="title">用户名</view>
		<input class="input" placeholder="请输入收货人" placeholder-class="placeholder" v-model="receiver" />
		<view class="title">手机号</view>
		<input class="input" placeholder="请输入收货人的手机号" placeholder-class="placeholder" v-model="receiverPhone" />
		<view class="title">省市区</view>
		<view class="inputContent" @tap="openPicker">
			<input class="input" placeholder="请输入省/市/区" placeholder-class="placeholder" v-model="provinces" />
		  <image src="../../static/index/bottom.png" class="bottomImg"></image>
		</view>
		<view class="title">详细地址</view>
		<input class="input" placeholder="请输入收货人的详细地址" placeholder-class="placeholder" v-model="detailAddress" />
		<view class="buy" @tap="submit">立即购买</view>
		<!-- 省市区三级联动组件 -->
		<lotusAddress v-on:choseVal="choseValue" :json="lotusAddressJson" :lotusAddressData="lotusAddressData">
		</lotusAddress>
	</view>
</template>

<script>
	import { buyGoods ,} from '../../api/api.js'
	import lotusAddress from "@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	export default {
		components:{
		  lotusAddress,
		},
		data() {
			return {
				
				lotusAddressJson: [],
				// 商品id
				goodsId:'',
				quantity:'',//  数量
				// 商品id
				title:'',// 商品名称
				money:'',// 商品价钱
				coverUrl:'',// 商品图片
				// 收货人
				receiver:'',
				// 收货手机号
				receiverPhone:'',
				lotusAddressData:{
				  visible:false,
					// 省
				  provinceName:'',
					// 市
				  cityName:'',
					// 区
				  townName:'',
				},
				// 省市区
				provinces:'',
				// 详细地址
				detailAddress:'',
				isVoucher:''  // 是否是多多券商品
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			this.quantity = e.quantity
			this.title = e.title
			this.money = e.money
			this.coverUrl = e.coverUrl
			this.isVoucher = e.isVoucher
			// 获取地址
			getBaseAreaList().then(res => {
				console.log('getBaseAreaList', res)
				this.lotusAddressJson = res.data
			})
		},
		onShow() {
			// 获取收货地址信息
			// this.getAddressInfo()
		},
		methods: {
			// 获取收货地址信息
			getAddressInfo() {
				let data = {}
				getAddress(data).then( res=> {
					this.receiver = res.data.fullName
					this.receiverPhone = res.data.mobile
					this.provinces = res.data.provinceText + res.data.cityText + res.data.areaText
					this.lotusAddressData.provinceName = res.data.provinceText
					this.lotusAddressData.cityName = res.data.cityText
					this.lotusAddressData.townName = res.data.areaText
					this.detailAddress = res.data.address
				})
			},
			//打开picker
			openPicker() {
			  this.lotusAddressData.visible = true;
			  this.lotusAddressData.provinceName = '广东省';
			  this.lotusAddressData.cityName = '广州市';
			  this.lotusAddressData.townName = '白云区';
			},
			//回传已选的省市区的值
			choseValue(res){
			  //res数据源包括已选省市区与省市区code
			  this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
			  //res.isChose = 1省市区已选 res.isChose = 0;未选
			  if(res.isChose){
			    this.lotusAddressData.provinceName = res.province;//省
			    this.lotusAddressData.cityName = res.city;//市
			    this.lotusAddressData.townName = res.town;//区
			    this.provinces = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
			  }
			  console.log(this.lotusAddressData)
			},
			// 立即购买
			submit() {
				if( !this.receiver ) {
					uni.showToast({
						title:'请填写收货人',
						icon:'none'
					})
					return false
				}
				if( !this.receiverPhone ) {
					uni.showToast({
						title:'请填写收货人手机号',
						icon:'none'
					})
					return false
				}
				if( !this.provinces ) {
					uni.showToast({
						title:'请选择省市区',
						icon:'none'
					})
					return false
				}
				if( !this.detailAddress ) {
					uni.showToast({
						title:'请填写收货人详细地址',
						icon:'none'
					})
					return false
				}
				var that = this
				uni.showModal({
					title:'发货',
					content:'确认信息发货信息无误',
					success:function(res) {
						if (res.confirm) {
							uni.redirectTo({
								url:'/pages/index/payWay?goodsId=' + that.goodsId + '&quantity=' + that.quantity + '&receiver=' + that.receiver+ '&receiverPhone=' + that.receiverPhone+ '&province=' + that.lotusAddressData.provinceName+ '&city=' + that.lotusAddressData.cityName
								+ '&county=' + that.lotusAddressData.townName+ '&detailAddress=' + that.detailAddress + '&isVoucher=' + that.isVoucher
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
  .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		.infoContent {
			display: flex;
			padding: 30rpx 0;
			width: 100%;
			border-bottom:  #F5F5F5 solid 10rpx;
			.img {
				margin-left: 30rpx;
				width: 186rpx;
				height: 186rpx;
				border-radius: 15rpx;
			}
			.info {
				margin-left: 20rpx;
				.shoppingTitle {
					margin-bottom: 20rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.num {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
					}
				}
				.sprc {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
					}
				}
				.price {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #DF223A;
					line-height: 50rpx;
					span {
						margin-left: 6rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #DF223A;
						line-height: 42rpx;
					}
				}
			}
		}
		.title {
			margin-top: 36rpx;
			width: 686rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 37rpx;
		}
		.input {
			padding-left: 30rpx;
			margin-top: 24rpx;
			width: 656rpx;
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 8rpx;
		}
		.placeholder {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			line-height: 40rpx;
		}
		.inputContent {
			position: relative;
			.bottomImg {
				position: absolute;
				width: 28rpx;
				height: 18rpx;
				bottom: 30rpx;
				right: 30rpx;
			}
		}
		.buy {
			margin-top: 180rpx;
			text-align: center;
			width: 690rpx;
			height: 90rpx;
			background: #FE3B33;
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
		}
	}
</style>
